<article class="module-myorder">
    <div class="m-table m-table--dark">
        <table>
            <thead>
            <tr>
                <th width="22%" class="fn-ta-left">{{$t('myOrder.orderTime')}}</th>
                <th width="8%" class="fn-ta-left">{{$t('myOrder.type')}}</th>
                <th width="12%" class="fn-ta-right">{{$t('myOrder.orderPrice')}}</th>
                <th width="16%" class="fn-ta-right">{{$t('myOrder.orderAmount')}}</th>
                <!--<th width="15%" class="fn-ta-right">成交数量</th>-->
                <th width="15%" class="fn-ta-right">{{$t('myOrder.residualAmount')}}</th>
                <th width="12%" class="fn-ta-right">{{$t('myOrder.operation')}}</th>
            </tr>
            </thead>
        </table>
        <div style="overflow: auto;max-height: 144px">
            <table>
                <tbody>
                <tr v-for="item in list"  v-show="isLoading === false && list.length > 0">
                    <td width="22%">{{item.createTime | timezone}}</td>
                    <td width="8%" v-html="item.tradeCoinTypeHtml"></td>
                    <td width="12%" class="fn-ta-right">{{item.priceText}}</td>
                    <td width="16%" v-html="item.numberHtml" class="fn-ta-right"></td>
                    <td width="15%" v-html="item.numberOverHtml" class="fn-ta-right"></td>
                    <td width="12%" class="fn-ta-right">
                        <a href="javascript:;" @click="cancelOrder(item, $event)">{{$t('myOrder.cancel')}}</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <loading v-show="isLoading" theme="dark"></loading>
        <no-data v-show="isLoading === false && list && list.length === 0">
            <p class="row">{{$t('myOrder.noOrderNow')}}</p>
        </no-data>
    </div>
</article>
